<template>
  <!-- item.disabled 是否禁用按钮 灰色显示 -->
  <div
    v-for="item of data"
    :key="item.id"
    :class="['list-item', item.disabled ? 'disabled' : '']"
    @click="checkBoxClick($event.target.checked, leftOrRight, item)"
    :draggable="!item.disabled"
    @dragstart="dragItem(item)"
  >
    <!-- 复选框 -->
    <input
      :id="'__checkbox__' + item.id"
      type="checkbox"
      :disabled="item.disabled"
    />
    <!-- 文本 -->
    <label :for="'__checkbox__' + item.id">{{ item.phone_name }}</label>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  leftOrRight: {
    type: String,
    validator(value) {
      return ['left', 'right'].includes(value);
    }
  }
});

const emit = defineEmits(['checkBoxClick', 'dragItem']);

const checkBoxClick = (checked, leftOrRight, item) => {
  emit('checkBoxClick', checked, leftOrRight, item);
};

//拖拽事件
const dragItem = (item) => {
  emit('dragItem', item);
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 20px;
  font-size: 12px;
  color: #666;

  &.disabled {
    opacity: 0.6;
  }
}
</style>
